<template>
    <div class="form__wrapper">
      <base-form
        ref="form"
        :label-width="'110px'"
        column="single"
        :form-list="formList"
        :form-rules="formRules"
        :form-disabled="submitLoading" />
      <div class="actions">
        <el-button type="primary" size="small" @click="submit" :loading="submitLoading">提交</el-button>
        <el-button type="default" size="small" @click="cancel" :disabled="submitLoading">取消</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import BaseForm from '@/components/BaseForm'
  import { dict_goodsStatus } from '@/utils/dictionary'
  import { format_date } from '@/utils/formatter'
  
  import { createApi,typeListApi,detailApi } from '@/api/modules/shop/goods'
  
  export default {
    name: 'ProductionCreate',
    components: { BaseForm },
    props: {
    id: {
      type: [Number, String],
      required: true
    }
  },
    data () {
      return {
        formList: [
          { label: '商品名称', prop: 'name', placeholder: '请输入（创建后不可修改）' },
          { label: '商品发布日期', prop: 'pubDate', type:'date' },
          { label: '商品图片', prop: 'file' , type: 'file',accept: '.png,.jpg,.jpeg', placeholder: '请选择文件，只允许.png,.jpg,.jpeg'},
          { label: '商品价格', prop: 'price' ,type: 'number',step:'0.01'},
          { label: '商品优惠价格', prop: 'preferencePrice' ,type: 'number',step:'0.01'},
          { label: '销售量', prop: 'sale' ,type: 'number'},
          { label: '商品数量', prop: 'amount' ,type: 'number'},
          { label: '商品描述信息', prop: 'intro' ,type: 'textarea'},
          { label: '备注', prop: 'remark' ,type: 'textarea'},
          { label: '商品类别', prop: 'typeId' ,type: 'select',options:[]},
          { label: '商品状态', prop: 'status' ,type: 'select',options:dict_goodsStatus},
        ],
  
        formRules: {
          name: [
            { required: true, message: '类型名称不能为空', trigger: ['blur', 'change'] },
            { max: 50, message: '类型名称不能超过50个字符', trigger: ['blur', 'change'] }
          ],
        },
  
        submitLoading: false
       
      }
    },
    methods: {
      // 商品列表
      async getGoodsTypeOptions () {
        try {
          const res = await typeListApi()
          this.$refs['form'].setOptions({
            prop: 'typeId',
            options: res.data.map(({ id, typeName }) => ({ label: typeName, value: id }))
          })
          
          if(this.id !== -1) {
            this.$refs['form'].setFormData({
              typeId: this.id
            })
          }
        } catch (err) {
          console.error(err)
        }
      },
      submit () {
        
        this.$refs['form'].validate(async valid => {
          if(valid) {
            try {
              this.submitLoading = true
              const params = this.$refs['form'].getFormData({ dataType: 'FormData' })
              params.set('pubDate', format_date(params.get('pubDate')))
              await createApi(params)
              this.$message({ type: 'success', message: '添加成功' })
              this.$emit('success')
            } catch (err) {
              console.error(err)
            }
            this.submitLoading = false
          }
        })
      },
      cancel () {
        this.$emit('close')
      },
      async getDetail () {
      try {
        // const params = { id: this.id } 
        const res = await detailApi(this.id)
        this.detail = res.data
        this.$refs['form'].setFormData(this.detail)

        this.formDisabled = false
      } catch (err) {
        console.error(err)
      }
    },
     
    },
    mounted() {
      this.getGoodsTypeOptions()
      this.getDetail()
    }
  }
  </script>
  
  <style lang="less" scoped>
  @import '../../../styles/form.less';
  </style>